<div class="tchatcontainer" id="tchatcontainer">
	<div class="tchatTab" id="tchatTab">Tchat</div>
	<div id="hiddablearea">
		<div class="tchatMessages" id="tchatMessages">
			<ul>
				<li ng-repeat="tchatMessage in tchatMessages">
					<img ng-show="tchatMessage.hasAvatar" ng-src="data:{{ tchatMessage.DALObject.User.AvatarMime }};base64,{{ tchatMessage.DALObject.User.Avatar }}" />
					<img src="Resources/Pictures/user.png" alt="avatar" ng-hide="tchatMessage.hasAvatar" /> 
					{{ tchatMessage.DALObject.Message }}
				</li>
			</ul>
		</div>
		<div class="tchatActions" id="tchatActions">
			<input type="text" id="newTchatMessage" ng-model="newTchatMessage" placeholder="Message" />
			<img ng-show="isMessageSending" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
			<button ng-hide="isMessageSending" type="button" class="btn btn-primary" ng-click="sendTchatMessagesCommand(newTchatMessage)">
				<span class="glyphicon glyphicon-ok"></span>
			</button>
		</div>
	</div>
</div>

<script>
$( document ).ready(function() {

	/*
	* The mouse leave the tchat area
	*/
	$("#tchatcontainer").mouseleave(function() {
		$("#tchatcontainer").height(30);
	});
	
	/*
	* The mouse enter the tchat area
	*/
	$("#tchatTab").mouseenter(function() {
		$("#tchatcontainer").height(200);
		$("#hiddablearea").fadeIn(200);
	});

	$("#hiddablearea").slideUp(500);
	$("#tchatcontainer").height(30);
});
</script>